<template>
	<view :class="timeShow?'content':'content content_'" v-if="showProps||show">
		<view :class="timeShow?'socket':'socket socket_'">
			<view class="text" v-if="text">
				{{text}}
			</view>
			<view class="gel center-gel">
				<view class="hex-brick h1"></view>
				<view class="hex-brick h2"></view>
				<view class="hex-brick h3"></view>
			</view>
			<view class="gel c1 r1">
				<view class="hex-brick h1"></view>
				<view class="hex-brick h2"></view>
				<view class="hex-brick h3"></view>
			</view>
			<view class="gel c2 r1">
				<view class="hex-brick h1"></view>
				<view class="hex-brick h2"></view>
				<view class="hex-brick h3"></view>
			</view>
			<view class="gel c3 r1">
				<view class="hex-brick h1"></view>
				<view class="hex-brick h2"></view>
				<view class="hex-brick h3"></view>
			</view>
			<view class="gel c4 r1">
				<view class="hex-brick h1"></view>
				<view class="hex-brick h2"></view>
				<view class="hex-brick h3"></view>
			</view>
			<view class="gel c5 r1">
				<view class="hex-brick h1"></view>
				<view class="hex-brick h2"></view>
				<view class="hex-brick h3"></view>
			</view>
			<view class="gel c6 r1">
				<view class="hex-brick h1"></view>
				<view class="hex-brick h2"></view>
				<view class="hex-brick h3"></view>
			</view>

			<view class="gel c7 r2">
				<view class="hex-brick h1"></view>
				<view class="hex-brick h2"></view>
				<view class="hex-brick h3"></view>
			</view>

			<view class="gel c8 r2">
				<view class="hex-brick h1"></view>
				<view class="hex-brick h2"></view>
				<view class="hex-brick h3"></view>
			</view>
			<view class="gel c9 r2">
				<view class="hex-brick h1"></view>
				<view class="hex-brick h2"></view>
				<view class="hex-brick h3"></view>
			</view>
			<view class="gel c10 r2">
				<view class="hex-brick h1"></view>
				<view class="hex-brick h2"></view>
				<view class="hex-brick h3"></view>
			</view>
			<view class="gel c11 r2">
				<view class="hex-brick h1"></view>
				<view class="hex-brick h2"></view>
				<view class="hex-brick h3"></view>
			</view>
			<view class="gel c12 r2">
				<view class="hex-brick h1"></view>
				<view class="hex-brick h2"></view>
				<view class="hex-brick h3"></view>
			</view>
			<view class="gel c13 r2">
				<view class="hex-brick h1"></view>
				<view class="hex-brick h2"></view>
				<view class="hex-brick h3"></view>
			</view>
			<view class="gel c14 r2">
				<view class="hex-brick h1"></view>
				<view class="hex-brick h2"></view>
				<view class="hex-brick h3"></view>
			</view>
			<view class="gel c15 r2">
				<view class="hex-brick h1"></view>
				<view class="hex-brick h2"></view>
				<view class="hex-brick h3"></view>
			</view>
			<view class="gel c16 r2">
				<view class="hex-brick h1"></view>
				<view class="hex-brick h2"></view>
				<view class="hex-brick h3"></view>
			</view>
			<view class="gel c17 r2">
				<view class="hex-brick h1"></view>
				<view class="hex-brick h2"></view>
				<view class="hex-brick h3"></view>
			</view>
			<view class="gel c18 r2">
				<view class="hex-brick h1"></view>
				<view class="hex-brick h2"></view>
				<view class="hex-brick h3"></view>
			</view>
			<view class="gel c19 r3">
				<view class="hex-brick h1"></view>
				<view class="hex-brick h2"></view>
				<view class="hex-brick h3"></view>
			</view>
			<view class="gel c20 r3">
				<view class="hex-brick h1"></view>
				<view class="hex-brick h2"></view>
				<view class="hex-brick h3"></view>
			</view>
			<view class="gel c21 r3">
				<view class="hex-brick h1"></view>
				<view class="hex-brick h2"></view>
				<view class="hex-brick h3"></view>
			</view>
			<view class="gel c22 r3">
				<view class="hex-brick h1"></view>
				<view class="hex-brick h2"></view>
				<view class="hex-brick h3"></view>
			</view>
			<view class="gel c23 r3">
				<view class="hex-brick h1"></view>
				<view class="hex-brick h2"></view>
				<view class="hex-brick h3"></view>
			</view>
			<view class="gel c24 r3">
				<view class="hex-brick h1"></view>
				<view class="hex-brick h2"></view>
				<view class="hex-brick h3"></view>
			</view>
			<view class="gel c25 r3">
				<view class="hex-brick h1"></view>
				<view class="hex-brick h2"></view>
				<view class="hex-brick h3"></view>
			</view>
			<view class="gel c26 r3">
				<view class="hex-brick h1"></view>
				<view class="hex-brick h2"></view>
				<view class="hex-brick h3"></view>
			</view>
			<view class="gel c28 r3">
				<view class="hex-brick h1"></view>
				<view class="hex-brick h2"></view>
				<view class="hex-brick h3"></view>
			</view>
			<view class="gel c29 r3">
				<view class="hex-brick h1"></view>
				<view class="hex-brick h2"></view>
				<view class="hex-brick h3"></view>
			</view>
			<view class="gel c30 r3">
				<view class="hex-brick h1"></view>
				<view class="hex-brick h2"></view>
				<view class="hex-brick h3"></view>
			</view>
			<view class="gel c31 r3">
				<view class="hex-brick h1"></view>
				<view class="hex-brick h2"></view>
				<view class="hex-brick h3"></view>
			</view>
			<view class="gel c32 r3">
				<view class="hex-brick h1"></view>
				<view class="hex-brick h2"></view>
				<view class="hex-brick h3"></view>
			</view>
			<view class="gel c33 r3">
				<view class="hex-brick h1"></view>
				<view class="hex-brick h2"></view>
				<view class="hex-brick h3"></view>
			</view>
			<view class="gel c34 r3">
				<view class="hex-brick h1"></view>
				<view class="hex-brick h2"></view>
				<view class="hex-brick h3"></view>
			</view>
			<view class="gel c35 r3">
				<view class="hex-brick h1"></view>
				<view class="hex-brick h2"></view>
				<view class="hex-brick h3"></view>
			</view>
			<view class="gel c36 r3">
				<view class="hex-brick h1"></view>
				<view class="hex-brick h2"></view>
				<view class="hex-brick h3"></view>
			</view>
			<view class="gel c37 r3">
				<view class="hex-brick h1"></view>
				<view class="hex-brick h2"></view>
				<view class="hex-brick h3"></view>
			</view>

		</view>
	</view>
</template>



<script>
	export default {
		props:{
			showProps:{
				type:Boolean,
				default:false
			},
			text:{
				type:String,
				default:''
			}
		},
		name: "gameLoading",
		data() {
			return {
				show: false,
				timeShow:false
			};
		},
		computed: {
			gameNetworkShow() {
				return this.$store.state.gameNetworkShow
			}
		},
		watch: {
			gameNetworkShow(a, b) {
				if(this.showProps) return;
				this.timeShow = this.$store.state.gameNetworkShow.code
			},
			timeShow(a,b){
				let time=0
				if(!this.timeShow)time=1000
				setTimeout(()=>{
					this.show=this.timeShow
				},time)
			},
			showProps(){
				this.timeShow =this.showProps
			}
		},
		mounted() {

				this.timeShow =this.showProps
			
		}
	};
</script>

<style>
	.content {
		background: #333;
		width: 100vw;
		height: 100vh;
		position: fixed;
		top: 0;
		left: 0;
		opacity: 1;
		transition: all 1s;
	}
	.text{
		color: #ffffff;
		font-size: 20rpx;
		text-align: center;
		line-height: 200upx;
		position: relative;
		top: 120rpx;
		z-index: 1;
		text-shadow: 0 0 4rpx #333;
	}
	.content_{
		opacity: 0;
	}
	.socket {
		width: 200upx;
		height: 200upx;
		position: absolute;
		left: 50%;
		margin-left: -100upx;
		top: 50%;
		margin-top: -100upx;
		transform: scale(1);
  	transition: all .6s;
	}
	.socket_{
		transform: scale(.2);
	}

	.hex-brick {
		background: #FED194;
		width: 30upx;
		height: 17upx;
		position: absolute;
		top: 5upx;
		animation-name: fade;
		animation-duration: 2s;
		animation-iteration-count: infinite;
	}

	.h2 {
		transform: rotate(60deg);
	}

	.h3 {
		transform: rotate(-60deg);
	}

	.gel {
		height: 30upx;
		width: 30upx;
		transition: all .3s;
		position: absolute;
		top: 50%;
		left: 50%;
	}

	.center-gel {
		margin-left: -15upx;
		margin-top: -15upx;

		animation-name: pulse;
		animation-duration: 2s;
		animation-iteration-count: infinite;
	}

	.c1 {
		margin-left: -47upx;
		margin-top: -15upx;
	}

	.c2 {
		margin-left: -31upx;
		margin-top: -43upx;
	}

	.c3 {
		margin-left: 1upx;
		margin-top: -43upx;
	}

	.c4 {
		margin-left: 17upx;
		margin-top: -15upx;
	}

	.c5 {
		margin-left: -31upx;
		margin-top: 13upx;
	}

	.c6 {
		margin-left: 1upx;
		margin-top: 13upx;
	}

	.c7 {
		margin-left: -63upx;
		margin-top: -43upx;
	}

	.c8 {
		margin-left: 33upx;
		margin-top: -43upx;
	}

	.c9 {
		margin-left: -15upx;
		margin-top: 41upx;
	}

	.c10 {
		margin-left: -63upx;
		margin-top: 13upx;
	}

	.c11 {
		margin-left: 33upx;
		margin-top: 13upx;
	}

	.c12 {
		margin-left: -15upx;
		margin-top: -71upx;
	}

	.c13 {
		margin-left: -47upx;
		margin-top: -71upx;
	}

	.c14 {
		margin-left: 17upx;
		margin-top: -71upx;
	}

	.c15 {
		margin-left: -47upx;
		margin-top: 41upx;
	}

	.c16 {
		margin-left: 17upx;
		margin-top: 41upx;
	}

	.c17 {
		margin-left: -79upx;
		margin-top: -15upx;
	}

	.c18 {
		margin-left: 49upx;
		margin-top: -15upx;
	}

	.c19 {
		margin-left: -63upx;
		margin-top: -99upx;
	}

	.c20 {
		margin-left: 33upx;
		margin-top: -99upx;
	}

	.c21 {
		margin-left: 1upx;
		margin-top: -99upx;
	}

	.c22 {
		margin-left: -31upx;
		margin-top: -99upx;
	}

	.c23 {
		margin-left: -63upx;
		margin-top: 69upx;
	}

	.c24 {
		margin-left: 33upx;
		margin-top: 69upx;
	}

	.c25 {
		margin-left: 1upx;
		margin-top: 69upx;
	}

	.c26 {
		margin-left: -31upx;
		margin-top: 69upx;
	}

	.c27 {
		margin-left: -79upx;
		margin-top: -15upx;
	}

	.c28 {
		margin-left: -95upx;
		margin-top: -43upx;
	}

	.c29 {
		margin-left: -95upx;
		margin-top: 13upx;
	}

	.c30 {
		margin-left: 49upx;
		margin-top: 41upx;
	}

	.c31 {
		margin-left: -79upx;
		margin-top: -71upx;
	}

	.c32 {
		margin-left: -111upx;
		margin-top: -15upx;
	}

	.c33 {
		margin-left: 65upx;
		margin-top: -43upx;
	}

	.c34 {
		margin-left: 65upx;
		margin-top: 13upx;
	}

	.c35 {
		margin-left: -79upx;
		margin-top: 41upx;
	}

	.c36 {
		margin-left: 49upx;
		margin-top: -71upx;
	}

	.c37 {
		margin-left: 81upx;
		margin-top: -15upx;
	}

	.r1 {
		animation-name: pulse;
		animation-duration: 2s;
		animation-iteration-count: infinite;
		animation-delay: .2s;
	}

	.r2 {
		animation-name: pulse;
		animation-duration: 2s;
		animation-iteration-count: infinite;
		animation-delay: .4s;
	}

	.r3 {
		animation-name: pulse;
		animation-duration: 2s;
		animation-iteration-count: infinite;
		animation-delay: .6s;
	}

	.r1>.hex-brick {
		animation-name: fade;
		animation-duration: 2s;
		animation-iteration-count: infinite;
		animation-delay: .2s;
	}

	.r2>.hex-brick {
		animation-name: fade;
		animation-duration: 2s;
		animation-iteration-count: infinite;
		animation-delay: .4s;
	}

	.r3>.hex-brick {
		animation-name: fade;
		animation-duration: 2s;
		animation-iteration-count: infinite;
		animation-delay: .6s;
	}


	@keyframes pulse {
		0% {
			-webkit-transform: scale(1);
			transform: scale(1);
		}

		50% {
			-webkit-transform: scale(0.01);
			transform: scale(0.01);
		}

		100% {
			-webkit-transform: scale(1);
			transform: scale(1);
		}
	}

	@keyframes fade {
		0% {
			background: #FED194;
		}

		50% {
			background: #9e7237;
		}

		100% {
			background: #FED194;
		}
	}
</style>
